<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item
      v-for="item in formTemplate"
      :key="item.label"
      :label="item.label"
    >
      <!-- 如果是上传 -->
      <el-upload
        v-if="item.type === 'upload'"
        class="avatar-uploader"
        :action="upload_path"
        :show-file-list="false"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <!-- 如果是选择框 -->
      <el-select
        v-if="item.type == 'select'"
        v-model="form.value"
        placeholder="请选择"
      >
        <el-option
          v-for="opt in item.opts"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { UPLOAD_PATH } from "@/utils/constant";
export default {
  name: "OtherPersonInfoForm",
  data() {
    return {
      formTemplate: [
        {
          label: "头像",
          key: "avatar",
          type: "upload",
        },
        {
          label: "期班",
          key: "class_period",
          type: "select",
          opts: [
            {
              label: "默认期班",
              value: "id",
            },
            {
              label: "一期一班",
              value: "id2",
            },
          ],
        },
      ],
      form: {},
      imageUrl: null,
      upload_path: UPLOAD_PATH,
    };
  },
};
</script>